<!-- 会员中心 -->
<template>
  <div class="member-container">
    <GoBack />
    <div class="member-title">成为会员</div>
    <div class="member-main">
      <img :src="state.memberBg" />
      <div class="member-vip">
        {{
          state.level == 0 ? "您还未开通vip" : "会员等级" + state.levelName
        }}
        <span v-if="state.level > 0">[{{ state.expireTime }}到期]</span>
      </div>
      <div class="member-list">
        <div
          class="member-item"
          v-for="item in state.memberList"
          :key="item.id"
          :class="state.memberCuttent == item.id ? 'member-item-current' : ''"
          @click="checkMember(item)"
        >
          <h6>{{ item.name }}</h6>
          <p>{{ item.remark }}</p>
          <div class="merber-base-monery">
            <span>原价</span><span>￥{{ item.remark * 5 }}</span>
          </div>
        </div>
      </div>
      <div class="submit-btn">
        <van-button
          type="primary"
          :loading="isLoading"
          @click="confirmUpgrade()"
          >确认升级</van-button
        >
      </div>
      <div class="member-content">
        <div
          class="member-content-item"
          v-for="item in state.memberContent"
          :key="item.id"
        >
          {{ item.content }}
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { computed, reactive, toRefs, ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import icon_hand from "@/assets/image/icon_hand3.png";
import GoBack from "@/components/goBack/index.vue";
import memberBg from "@/assets/image/icon_hand4.png";

import { GetDictList } from "@/api/common";

const route = useRoute();
const router = useRouter();
const state = reactive({
  icon_hand,
  memberBg,
  memberList: [],
  memberCuttent: 1,
  memberContent: [
    {
      id: 1,
      content: "会员可以解锁所有图集",
    },
    {
      id: 2,
      content: "如无法充值可联系客服",
    },
    {
      id: 3,
      content: "会员充值不支持退款",
    },
  ],
  level: 0,
  expireTime: "",
});

const checkMember = (item) => {
  state.memberCuttent = item.id;
};

const getDictData = async () => {
  let { data } = await GetDictList({ keyId: 23 });
  state.memberList = data.filter((o) => o.id != 45);
  state.memberCuttent = state.memberList[0].id;
};

import { UpgradeMember } from "@/api/common";
let isLoading = ref(false);
const confirmUpgrade = async () => {
  let params = {
    id: state.memberCuttent,
  };
  isLoading.value = true;
  let datares = await UpgradeMember(params);
  let resData = datares.data;
  console.log(resData, "resData");
  isLoading.value = false;
  document.getElementById("payMent").innerHTML = resData;
  let namevalue = document.getElementsByName("biz_content")[0].value;
  let orderNum = JSON.parse(namevalue);
  localStorage.setItem("out_trade_no", orderNum.out_trade_no);
  document.forms[0].setAttribute("target", "_self"); // 当前窗口跳转
  document.forms[0].submit();
  document.getElementById("payMent").innerHTML = "";
};

onMounted(() => {
  let u = JSON.parse(localStorage.getItem("userInfo"));
  if (u) {
    state.level = u.level;
    state.levelName = u.levelName;
    state.expireTime = u.expireTime;
  }
  getDictData();
});
</script>



<style lang="scss" scoped>
.member-main {
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  img {
    width: 100%;
  }
}
.member-list {
  .member-item {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    width: calc(25% - 10px);
    margin-left: 8px;
    margin-top: 15px;
    padding: 10px;
    border-radius: 10px;
    box-sizing: border-box;
    text-align: center;
    border: 3px solid #fff;
    background: #fff;
    display: inline-block;
    p {
      font-size: 20px;
      margin: 10px 0 5px 0;
      line-height: 1;
      color: #f00;
      &::before {
        content: "￥";
        font-size: 12px;
      }
    }
    .merber-base-monery {
      font-size: 10px;
      color: #999;
      span:nth-child(2) {
        text-decoration: line-through;
        color: #999;
      }
    }
  }
  .member-item-current {
    border-color: #a8693d;
  }
}

.member-title {
  position: relative;
  z-index: 11;
  text-align: center;
  height: 60px;
  line-height: 60px;
  font-weight: 700;
}

.member-content {
  padding: 0 30px;
  background: #fff;
  .member-content-item {
    line-height: 1.3;
    color: #999;
    &:before {
      content: "·";
      display: inline-block;
      font-size: 30px;
      margin-right: 5px;
      position: relative;
      top: 5px;
    }
  }
}

.member-container {
  background: #fff;
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.member-vip {
  position: absolute;
  top: 206px;
  left: 38px;
  color: #666;
}
</style>
